import React, { PureComponent, createRef } from "react"

export class App extends PureComponent {
    constructor(){
        super()

        this.state = {

        }

        this.titleRef = createRef()
        this.titleEl = null
    }

    getNativeDOM(){
        // 1.在React元素上绑定上一个ref字符串 
        // console.log(this.refs)

        // 2.提前创建好ref对象，createRef()，将创建出来的对象绑定到元素上
        // console.log(this.titleRef.current);
        
        // 3.传入一个回调函数，在对应的元素被渲染之后，回调函数被执行，并且将元素传入
        console.log(this.titleEl)

    }
    render() {
        return (
            <div>
                <h2 ref="why">Hello World</h2>
                <h2 ref={this.titleRef}>你好啊，张三</h2>
                <h2 ref={e => {this.titleEl = e}}>你好啊，李四</h2>
                <button onClick={(e) => this.getNativeDOM()}>获取DOM</button>
            </div>
        )
    }
}

export default App
